<template>
  <div>
    <div style="width: 700px; padding: 0 30px;">
      <el-form :model="shopConfig" label-width="180px">
        <el-form-item label="店铺名称" required>
          <el-input v-model="shopConfig.name" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="营业状态" style="text-align: left" required>
          <el-switch
              v-model="shopConfig.status === 1"
              active-text="营业中"
              inactive-text="休息中"
              @change="updateShopStatus">
          </el-switch>
        </el-form-item>
        <el-form-item label="小程序菜单栏上的公告" required>
          <el-input type="textarea" v-model="shopConfig.notice" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item label="外卖配送费(单位: 分)">
          <el-input type="number" v-model="shopConfig.packingPrice"></el-input>
        </el-form-item>
        <el-form-item label="外卖打包费(单位: 分)">
          <el-input type="number" v-model="shopConfig.sendingPrice"></el-input>
        </el-form-item>
        <el-form-item label="外卖起送价格(单位: 分)">
          <el-input type="number" v-model="shopConfig.sendingNeedPrice"></el-input>
        </el-form-item>
        <el-form-item label="开始营业时间(比如:09:30)" required>
          <el-input v-model="shopConfig.startTime" maxlength="5"></el-input>
        </el-form-item>
        <el-form-item label="开始歇业时间" required>
          <el-input v-model="shopConfig.endTime" maxlength="5"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="shopConfig.relationPhones" maxlength="35"></el-input>
        </el-form-item>
        <el-form-item label="联系QQ">
          <el-input v-model="shopConfig.relationQQ" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="联系微信">
          <el-input v-model="shopConfig.relationWeixin" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址">
          <el-input v-model="shopConfig.address" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item label="店铺描述">
          <el-input type="textarea" v-model="shopConfig.description" maxlength="100"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm()">保存</el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>


<script>
import * as shopAdminApi from "../api/system/shopAdminApi.js"

export default {
  name: "shopConfig",
  data() {
    return {
      shopConfig: {}
    };
  },
  mounted() {
    this.getShopConfig()
  },
  methods: {
    getShopConfig() {
      shopAdminApi.getShopConfig({
        success: res => {
          this.shopConfig = res.data
        }
      })
    },
    // 更新店铺状态
    updateShopStatus() {
      let newStatus = (this.shopConfig.status === 1 ? 2 : 1)
      this.shopConfig.status = newStatus
      shopAdminApi.updateShopConfig({
        data: this.shopConfig,
        success: res => {
          this.$notify.success(newStatus === 1 ? "开始营业" : "已设置为休息中")
          this.getShopConfig()
        }
      })
    },
    submitForm() {
      shopAdminApi.updateShopConfig({
        data: this.shopConfig,
        success: res => {
          this.$notify.success("更新成功")
          this.getShopConfig()
        }
      })
    }
  }
}
</script>
